<template>
    <div class="box">
        <div clas="nav">
        <van-swipe class="my-swipe">
            <van-swipe-item v-for="(item,index) in Math.ceil(navList.length/5)">
                <van-grid :column-num="5" :border="false">
                    <van-grid-item :icon="subitem.icon" :text="subitem.title" v-for="subitem in navList.slice(5 * index, 5 * (index + 1))" />
                </van-grid>
            </van-swipe-item>
        </van-swipe>
    </div>
    </div>
</template>
<script>
    export default {
        props:['navList'],
    }
</script>
<style lang="less" scoped>
.box {
            width: 100%;
            height: 100%;
            background: linear-gradient(pink, #fff);
            display: flex;
            justify-content: center;
            align-items: center;
        }
.box>div {
            width: 90%;
            background-color: #fff;
            font-size: 0;
            border-radius: 20px;
            overflow: hidden;
        }
</style>